<template>
  <div class="message-title">
    <span class="main-text">{{ mainText }}</span>
    <span class="less-text">{{ lessText }}</span>
  </div>
</template>

<script lang="ts" setup name="MessageTitle">
type Props = { mainText: string; lessText?: string }
const props = defineProps<Props>()
</script>

<style lang="less" scoped>
.message-title {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  .main-text {
    font-size: 16px;
    color: #262626;
    letter-spacing: 1.14px;
    font-weight: 500;
  }
  .less-text {
    font-size: 12px;
    color: #bfbfbf;
  }
}
</style>
